<template>
  <div class="app-container">
    <div class="h-full order-line-page">
      <div class="chart-wrap h-full w-full" :class="`${chatClassName}`"></div>
    </div>
  </div>
</template>

<script>
import ChartWatcherMixin from '@/mixins/ChartWatcherMixin.js'
import { handleLineFormatter } from '@/utils/study.js'

// 参考
// https://echarts.apache.org/examples/zh/editor.html?c=line-aqi
export default {
  name: 'OrderLine',
  mixins: [ChartWatcherMixin],
  data() {
    return {
      chartOption: {
        grid: {
          show: true,
          // top: 10,
          // // bottom: 20,
          // bottom: 95,
          // left: 25,
          // right: 1 + 25,
          borderWidth: 0, // 确保没有边框

          left: 25,
          right: 0,
          top: 8,
          bottom: 75
        },
        tooltip: {
          trigger: 'axis', // 轴触发
          formatter: (params) => handleLineFormatter.call(this, params)
        },
        xAxis: {
          data: []
        },
        yAxis: {
          type: 'value',
          min: 1,
          max: 49,
          splitLine: {
            show: false
          },
          interval: 1 // 这里可以根据需要调整间隔大小
        },
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        // dataZoom: [
        // 	{
        // 		startValue: 0
        // 	},
        // 	{
        // 		type: 'inside'
        // 	}
        // ],
        dataZoom: [
          {
            show: true,
            bottom: 10,
            right: 5,
            left: 5
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 25,
              color: '#93CE07'
            },
            {
              gt: 25,
              lte: 50,
              color: '#FBDB0F'
            }
            // {
            // 	gt: 100,
            // 	lte: 150,
            // 	color: '#FC7D02'
            // },
            // {
            // 	gt: 150,
            // 	lte: 200,
            // 	color: '#FD0100'
            // },
            // {
            // 	gt: 200,
            // 	lte: 300,
            // 	color: '#AA069F'
            // },
            // {
            // 	gt: 300,
            // 	color: '#AC3B2A'
            // }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          type: 'line',
          data: [],
          markLine: {
            silent: true,
            lineStyle: {
              color: '#ee6666'
            },
            symbol: ['none', 'none'], // 去掉线两端的箭头
            data: [
              {
                yAxis: 25
              }
              // {
              // 	yAxis: 100
              // },
              // {
              // 	yAxis: 150
              // },
              // {
              // 	yAxis: 200
              // },
              // {
              // 	yAxis: 300
              // }
            ]
          },
          lineStyle: {
            // color: lineColor, // 默认颜色
            width: 1 // 默认线宽
          },
          emphasis: {
            lineStyle: {
              // color: lineColor, // 悬停时的颜色
              width: 1 // 悬停时的线宽
            }
            // itemStyle: {
            //   color: "#ff7f50", // 悬停时数据点的颜色
            //   borderColor: "#ff7f50", // 数据点边框颜色
            //   borderWidth: 2, // 数据点边框宽度
            // },
          }
        }
      }
    }
  },
  methods: {
    updateChart() {
      if (this.myChart) {
        const values = this.allValues
        if (values.length) {
          const startValue = values[values.length - 50].time
          const endValue = values[values.length - 1].time
          this.chartOption.dataZoom[0].startValue = startValue
          this.chartOption.dataZoom[0].endValue = endValue
        }
        this.chartOption.xAxis.data = values.map((_, index) => index + 1)
        this.chartOption.series.data = values.map((e) => {
          return {
            value: Number(e.number),
            sourceData: e,
            itemStyle: Number(e.number) === 25 ? { color: '#FF0000' } : {} // 为值为 25 的点设置颜色
          }
        })
        // 绘制图表
        this.myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>
